<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="new_file.css" />
		<style>
			*{
			 margin: 0;
			 padding: 0;
			}
			.a{
				position: relative;
			    width: 200px;
				 height:50px;
				 background-image: url(产品-Bellucci%20EVOO_files/logo_k.png);
				 top: 15px;
				 left: 40px;
				}
			a:hover{
					 background-color: #AFD9EE;
				     color: #31708F;
			       }
			li{
				list-style-type:none;
				float: left;
				margin-left: 30px;
			}	
			
			a{
				text-decoration: none;	
				font-size: small;
				font-family: "微软雅黑";
				color: #444444;	
				
			 }
			 ul{
			 		position: relative;
			 		top: -15px;
			 		left: 79%;
			 		width: 250px;
			 		/* overflow: auto; */
					
			 } 
			 p{
			 		width: 1px;height: 1px;
			 		background-color: #000000;
			 		display: none;
	         	}
				
			.h{
				background-color: #fafafa;
				width: 1349px;
				height: 730px;
				margin-top: 45px;
			  }	
				  
			#toggle {
				width: 50px;
				height: 50px;
				border-radius: 500px 500px;
				display: inline-block;
				margin-left: -15px;
				margin-top: 9px;
				background-color: lightslategrey;
				
			}
			
			#toggle~span {
				width: 25px;
				height: 4px;
				background-color: darkgray;
				display: block;
				margin: 9px 12px;
				position: absolute;
			}	
				  
			.span {
				  	top: 12px;
				  	left: -15px;
				  }
				  
			.span2 {
				  	top: 22px;
				  	left: -15px;
				  }
				  
			.span3 {
				  	top: 32px;
				  	left: -15px;
				  }
				  

		</style>
	</head>
	<body>
		<div class="a">       
		 <div class="b">
			<a href="#" id="toggle"></a>
			<span class="span sspan"></span>
			<span class="span2 sspan"></span>
			<span class="span3 sspan"></span>
		 </div>
		 </div>
		<div>
			<ul>
				<li style="width: 52px;"><a href="产品展示.html">产品展示</a>
					<p></p>
				</li>
				<li style="width: 66px;"><a href="#">商店定位器</a>
					<p></p>
				</li>
				<li style="width: 27px;"><a href="#">联系</a>
					<p></p>
				</li>
			</ul>
		</div>	
					<script src="new_file.js" type="text/javascript" charset="utf-8"></script>

					<script type="text/javascript">
						$("li").hover(function() {
							$(this).children("p").show()
							var aa = $(this).width()
							$(this).children("p").stop(true).animate({
								"width": aa
							}, 350)
							console.log($(this).children("p"))
						}, function() {
							var aa = $(this).width()
							$(this).children("p").stop(true).animate({
								"width": 0
							}, 350)
						})
					</script>
	</body>
</html>
